<template>
  <div class="context-right" :class="{ collapsed: collapsed }">
    <div class="antvX6Demo-container-right">
      <!-- 属性头部标签页 -->
      <div class="properties-header">
        <el-tabs :model-value="activeTab" @update:model-value="handleActiveTabChange">
          <template v-if="(!isNodeSelected && !isEdgeSelected) || isMultipleNodesSelected || (selectedNode && selectedNode.shape === 'selection-group')">
            <el-tab-pane label="全局变量" name="全局变量" />
            <el-tab-pane label="图纸选项" name="图纸选项" />
            <el-tab-pane label="选择组" name="选择组" />
          </template>
          <template v-else>
            <el-tab-pane label="参数" name="参数" />
            <el-tab-pane label="格式" name="格式" />
          </template>
        </el-tabs>
      </div>

      <!-- 图纸选项内容 -->
      <div v-if="activeTab === '图纸选项'" class="properties-content">
        <div class="property-item">
          <div class="property-label">背景颜色</div>
          <div class="property-value">
            <el-color-picker :model-value="backgroundColor" size="small" @change="handleBackgroundColorChange" />
          </div>
        </div>
        <div class="property-item">
          <div class="property-label">网格类型</div>
          <div class="property-value">
            <el-select :model-value="gridType" size="small" @change="handleGridTypeChange">
              <el-option v-for="item in gridTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="property-item">
          <div class="property-label">网格颜色</div>
          <div class="property-value">
            <el-color-picker :model-value="gridColor" size="small" @change="handleGridColorChange" />
          </div>
        </div>
        <div class="property-item">
          <div class="property-label">默认拖拽画布</div>
          <div class="property-value">
            <el-switch :model-value="referenceStandardsVisible" @change="handleReferenceStandardsChange" />
          </div>
        </div>
        <div class="property-hint">
          <el-text size="small" type="info">关闭时可用：空格键+拖拽、Ctrl+拖拽、Ctrl+双击重置视图</el-text>
        </div>
        <div class="property-item">
          <div class="property-label">元件标签</div>
          <div class="property-value">
            <el-switch :model-value="elementsStandard" @change="handleElementsStandardChange" />
          </div>
        </div>
        <div class="property-item">
          <div class="property-label">引脚标签</div>
          <div class="property-value">
            <el-switch :model-value="guidelineStandard" @change="handleGuidelineStandardChange" />
          </div>
        </div>
      </div>

      <!-- 选择组内容 -->
      <div v-if="activeTab === '选择组'" class="properties-content">
        <div
          v-if="!isEditingGroup && (!selectionGroups.has(activeDrawingId) || selectionGroups.get(activeDrawingId)?.size === 0)"
          class="empty-state"
        >
          <p>选择一个选择组或从多选创建新的选择组</p>
        </div>
        <template v-else-if="!isEditingGroup">
          <!-- 选择组列表 -->
          <div class="groups-header">
            <div class="groups-title">选择组列表</div>
            <div class="groups-toggle" @click="handleToggleSelectionGroupsCollapse">
              <el-icon>
                <arrow-down v-if="!isSelectionGroupsCollapsed" />
                <arrow-right v-else />
              </el-icon>
            </div>
          </div>
          <div v-if="!isSelectionGroupsCollapsed" class="groups-list">
            <div
              v-for="[groupId, group] in [...(selectionGroups.get(activeDrawingId) || new Map())]"
              :key="groupId"
              class="group-list-item"
              :class="{ active: activeSelectionGroup && activeSelectionGroup.id === groupId }"
              @click="handleSelectGroupOnly(groupId)"
              @contextmenu="handleSelectionGroupContextMenu($event, groupId)"
              @dblclick="handleEditGroup(groupId)"
            >
              <div class="group-color" :style="{ backgroundColor: group.backgroundColor }"></div>
              <div class="group-name">{{ group.text }}</div>
            </div>
          </div>
          <div class="group-actions">
            <el-button size="small" type="primary" @click="handleCreateSelectionGroup">创建选择组</el-button>
          </div>
        </template>
        <template v-else>
          <div class="groups-header">
            <div class="groups-title">编辑选择组</div>
            <div class="groups-back" @click="handleBackToGroupsList">
              <el-icon><arrow-left /></el-icon>
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">组背景颜色</div>
            <div class="property-value">
              <el-color-picker :model-value="groupBackgroundColor" size="small" @change="handleUpdateSelectionGroup" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">组文本</div>
            <div class="property-value">
              <el-input :model-value="groupText" size="small" @change="handleUpdateSelectionGroup" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">操作</div>
            <div class="property-value">
              <el-button size="small" type="danger" @click="handleDeleteSelectionGroup">删除选择组</el-button>
            </div>
          </div>
        </template>
      </div>

      <!-- 参数选项卡内容 -->
      <!-- 节点参数 -->
      <div v-if="activeTab === '参数' && isNodeSelected" class="properties-content">
        <div v-if="!currentNodeConfiguration" class="no-config-debug">
          <p>调试信息：</p>
          <p>选中节点ID: {{ selectedNode?.id }}</p>
          <p>节点类型: {{ selectedNode?.shape }}</p>
          <p>节点配置: {{ currentNodeConfiguration }}</p>
          <p>isNodeSelected: {{ isNodeSelected }}</p>
        </div>
        <node-properties-panel
          v-if="currentNodeConfiguration"
          :node-configuration="currentNodeConfiguration"
          :node-data="nodePropertiesData"
          :selected-node-id="selectedNode?.id || null"
          @apply-changes="handleApplyChanges"
          @parameter-change="handleParameterChange"
          @pin-value-change="handlePinValueChange"
          @property-change="handlePropertyChange"
        />
        <div v-else class="no-config-message">
          <p>无法找到该节点类型的配置信息</p>
          <p>节点类型: {{ selectedNode?.shape }}</p>
        </div>
      </div>

      <!-- 边参数 -->
      <div v-if="activeTab === '参数' && isEdgeSelected" class="properties-content">
        <div class="edge-parameters-panel">
          <div class="parameter-header">
            <div class="parameter-title">
              <el-icon><el-icon-connection /></el-icon>
              边参数配置
            </div>
            <div class="parameter-subtitle">边ID: {{ selectedEdge?.id }}</div>
          </div>

          <div class="no-parameters-placeholder">
            <div class="placeholder-icon">
              <el-icon><el-icon-document /></el-icon>
            </div>
            <div class="placeholder-text">暂无参数</div>
            <div class="placeholder-hint">该边类型暂无可配置参数，您可以在格式选项卡中调整边的外观属性</div>
          </div>
        </div>
      </div>

      <!-- 格式选项卡内容 -->
      <div v-if="activeTab === '格式' && (isNodeSelected || isEdgeSelected)" class="properties-content">
        <!-- 节点格式设置 -->
        <div v-if="isNodeSelected" class="property-section">
          <div class="section-title">大小位置</div>
          <div class="property-item">
            <div class="property-label">
              X
              <span class="required">*</span>
            </div>
            <div class="property-value">
              <el-input-number
                v-if="selectedNode"
                :model-value="nodeX"
                size="small"
                @change="(value) => handleNodePositionChange(value, undefined)"
              />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">
              Y
              <span class="required">*</span>
            </div>
            <div class="property-value">
              <el-input-number
                v-if="selectedNode"
                :model-value="nodeY"
                size="small"
                @change="(value) => handleNodePositionChange(undefined, value)"
              />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">
              宽度
              <span class="required">*</span>
            </div>
            <div class="property-value">
              <el-input-number
                v-if="selectedNode"
                :model-value="nodeWidth"
                size="small"
                @change="(value) => handleNodeSizeChange(value, undefined)"
              />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">
              高度
              <span class="required">*</span>
            </div>
            <div class="property-value">
              <el-input-number
                v-if="selectedNode"
                :model-value="nodeHeight"
                size="small"
                @change="(value) => handleNodeSizeChange(undefined, value)"
              />
            </div>
          </div>
          <div class="property-item full-width">
            <el-button block size="small" @click="handleResetNodeSize">
              <el-icon><refresh /></el-icon>
              重设大小
            </el-button>
          </div>
        </div>

        <!-- 节点排列 -->
        <div v-if="isNodeSelected" class="property-section">
          <div class="section-title">排列</div>
          <div class="property-item half-width">
            <el-button size="small" @click="handleBringToFront">
              <el-icon><top /></el-icon>
              置于顶层
            </el-button>
          </div>
          <div class="property-item half-width">
            <el-button size="small" @click="handleSendToBack">
              <el-icon><bottom /></el-icon>
              置于底层
            </el-button>
          </div>
          <div class="property-item half-width">
            <el-button size="small" @click="() => selectedNode && handleRotateNode(selectedNode, -90)">
              <el-icon><refresh-left /></el-icon>
              逆时针旋转
            </el-button>
          </div>
          <div class="property-item half-width">
            <el-button size="small" @click="() => selectedNode && handleRotateNode(selectedNode, 90)">
              <el-icon><refresh-right /></el-icon>
              顺时针旋转
            </el-button>
          </div>
        </div>

        <!-- 节点样式 -->
        <div v-if="isNodeSelected" class="property-section">
          <div class="section-title">样式</div>
          <div class="property-item">
            <div class="property-label">填充颜色</div>
            <div class="property-value">
              <el-color-picker size="small" :model-value="nodeFillColor" @change="handleNodeFillChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">边框颜色</div>
            <div class="property-value">
              <el-color-picker size="small" :model-value="nodeStrokeColor" @change="handleNodeStrokeChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">边框宽度</div>
            <div class="property-value">
                              <el-input-number :model-value="nodeBorderWidth" :max="5" :min="0.5" size="small" :step="0.5" @change="handleNodeStrokeWidthChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">文本颜色</div>
            <div class="property-value">
              <el-color-picker size="small" :model-value="nodeLabelColor" @change="handleNodeLabelColorChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">文本大小</div>
            <div class="property-value">
                              <el-input-number :model-value="nodeFontSize" :max="24" :min="8" size="small" :step="1" @change="handleNodeFontSizeChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">字体</div>
            <div class="property-value">
              <el-select v-if="selectedNode" :model-value="nodeFontFamily" size="small" @change="handleNodeFontFamilyChange" filterable>
                <el-option-group label="中文字体">
                  <el-option
                    v-for="font in fontOptions.slice(0, 4)"
                    :key="font.value"
                    :label="font.label"
                    :value="font.value"
                  />
                </el-option-group>
                <el-option-group label="英文字体">
                  <el-option
                    v-for="font in fontOptions.slice(4, 9)"
                    :key="font.value"
                    :label="font.label"
                    :value="font.value"
                  />
                </el-option-group>
              </el-select>
            </div>
          </div>
        </div>

        <!-- 边格式设置 -->
        <div v-if="isEdgeSelected" class="property-section">
          <div class="section-title">大小位置</div>
          <div class="property-item">
            <div class="property-label">
              首端连接桩
              <span class="required">*</span>
            </div>
            <div class="property-value">
                              <el-select :model-value="edgeSourcePort" size="small" @change="handleEdgeSourcePortChange">
                <el-option v-for="port in availableInputPorts" :key="port.id" :label="port.label" :value="port.id" />
              </el-select>
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">
              末端连接桩
              <span class="required">*</span>
            </div>
            <div class="property-value">
                              <el-select :model-value="edgeTargetPort" size="small" @change="handleEdgeTargetPortChange">
                <el-option v-for="port in availableOutputPorts" :key="port.id" :label="port.label" :value="port.id" />
              </el-select>
            </div>
          </div>
        </div>

        <div v-if="isEdgeSelected" class="property-section">
          <div class="section-title">路由</div>
          <div class="property-item">
            <div class="property-label">路由类型</div>
            <div class="property-value">
                              <el-select :model-value="edgeRouterType" size="small" @change="handleEdgeRouterTypeChange">
                <el-option v-for="option in routerTypeOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">连接类型</div>
            <div class="property-value">
                              <el-select :model-value="edgeConnectorType" size="small" @change="handleEdgeConnectorTypeChange">
                <el-option v-for="option in connectorTypeOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </div>
          </div>
        </div>

        <div v-if="isEdgeSelected" class="property-section">
          <div class="section-title">样式</div>
          <div class="property-item">
            <div class="property-label">线条颜色</div>
            <div class="property-value">
                              <el-color-picker size="small" :model-value="edgeStrokeColor" @change="handleEdgeStrokeColorChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">线条宽度</div>
            <div class="property-value">
                              <el-input-number :model-value="edgeStrokeWidth" :max="5" :min="0.5" size="small" :step="0.5" @change="handleEdgeStrokeWidthChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">填充颜色</div>
            <div class="property-value">
                              <el-color-picker size="small" :model-value="edgeFillColor" @change="handleEdgeFillColorChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">文本颜色</div>
            <div class="property-value">
                              <el-color-picker size="small" :model-value="edgeTextColor" @change="handleEdgeTextColorChange" />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">字体</div>
            <div class="property-value">
              <el-select :model-value="edgeFontFamily" size="small" @change="handleEdgeFontFamilyChange" filterable>
                <el-option-group label="中文字体">
                  <el-option
                    v-for="font in fontOptions.slice(0, 4)"
                    :key="font.value"
                    :label="font.label"
                    :value="font.value"
                  />
                </el-option-group>
                <el-option-group label="英文字体">
                  <el-option
                    v-for="font in fontOptions.slice(4, 9)"
                    :key="font.value"
                    :label="font.label"
                    :value="font.value"
                  />
                </el-option-group>
              </el-select>
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">字体大小</div>
            <div class="property-value">
                              <el-input-number :model-value="edgeFontSize" :max="24" :min="8" size="small" :step="1" @change="handleEdgeFontSizeChange" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  ArrowRight,
  ArrowLeft,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Top,
  Bottom
} from '@element-plus/icons-vue'
import type { Node } from '@antv/x6'
import type { NodeConfiguration } from '../utils/nodeInfo'
import NodePropertiesPanel from './NodePropertiesPanel.vue'

// Props
interface Props {
  collapsed: boolean
  activeTab: string
  isNodeSelected: boolean
  isEdgeSelected: boolean
  isMultipleNodesSelected: boolean
  selectedNode: Node | null
  selectedEdge: any
  currentNodeConfiguration: NodeConfiguration | null
  nodePropertiesData: Record<string, any>

  // 图纸选项相关
  backgroundColor: string
  gridType: string
  gridColor: string
  referenceStandardsVisible: boolean
  elementsStandard: boolean
  guidelineStandard: boolean
  gridTypeOptions: Array<{ label: string; value: string }>

  // 选择组相关
  selectionGroups: Map<number, Map<string, any>>
  activeDrawingId: number
  activeSelectionGroup: any
  isEditingGroup: boolean
  groupBackgroundColor: string
  groupText: string
  isSelectionGroupsCollapsed: boolean

  // 节点格式相关
  nodeX: number
  nodeY: number
  nodeWidth: number
  nodeHeight: number
  nodeBorderWidth: number
  nodeFontSize: number
  nodeFontFamily: string
  nodeFillColor: string
  nodeStrokeColor: string
  nodeLabelColor: string

  // 边格式相关
  edgeSourcePort: string
  edgeTargetPort: string
  edgeRouterType: string
  edgeConnectorType: string
  edgeStrokeColor: string
  edgeStrokeWidth: number
  edgeFillColor: string
  edgeTextColor: string
  edgeFontFamily: string
  edgeFontSize: number

  // 选项数据
  availableInputPorts: Array<{ id: string; label: string }>
  availableOutputPorts: Array<{ id: string; label: string }>
  routerTypeOptions: Array<{ label: string; value: string }>
  connectorTypeOptions: Array<{ label: string; value: string }>
  fontOptions: Array<{ label: string; value: string }>
}

// Emits
interface Emits {
  // 标签页切换
  (e: 'active-tab-change', value: string): void
  // 图纸选项相关
  (e: 'background-color-change', value: string): void
  (e: 'grid-type-change', value: string): void
  (e: 'grid-color-change', value: string): void
  (e: 'reference-standards-change', value: boolean): void
  (e: 'elements-standard-change', value: boolean): void
  (e: 'guideline-standard-change', value: boolean): void

  // 选择组相关
  (e: 'toggle-selection-groups-collapse'): void
  (e: 'select-group-only', groupId: string): void
  (e: 'selection-group-context-menu', event: MouseEvent, groupId: string): void
  (e: 'edit-group', groupId: string): void
  (e: 'create-selection-group'): void
  (e: 'back-to-groups-list'): void
  (e: 'update-selection-group'): void
  (e: 'delete-selection-group'): void

  // 节点属性相关
  (e: 'apply-changes', data: any): void
  (e: 'parameter-change', data: any): void
  (e: 'pin-value-change', data: any): void
  (e: 'property-change', data: any): void

  // 节点格式相关
  (e: 'node-position-change', x?: number, y?: number): void
  (e: 'node-size-change', width?: number, height?: number): void
  (e: 'reset-node-size'): void
  (e: 'bring-to-front'): void
  (e: 'send-to-back'): void
  (e: 'rotate-node', node: Node, angle: number): void
  (e: 'node-fill-change', color: string): void
  (e: 'node-stroke-change', color: string): void
  (e: 'node-stroke-width-change', width: number): void
  (e: 'node-label-color-change', color: string): void
  (e: 'node-font-size-change', size: number): void
  (e: 'node-font-family-change', family: string): void

  // 边格式相关
  (e: 'edge-source-port-change', port: string): void
  (e: 'edge-target-port-change', port: string): void
  (e: 'edge-router-type-change', type: string): void
  (e: 'edge-connector-type-change', type: string): void
  (e: 'edge-stroke-color-change', color: string): void
  (e: 'edge-stroke-width-change', width: number): void
  (e: 'edge-fill-color-change', color: string): void
  (e: 'edge-text-color-change', color: string): void
  (e: 'edge-font-family-change', family: string): void
  (e: 'edge-font-size-change', size: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 事件处理方法
const handleActiveTabChange = (value: string) => {
  emit('active-tab-change', value)
}

const handleBackgroundColorChange = (value: string) => {
  emit('background-color-change', value)
}

const handleGridTypeChange = (value: string) => {
  emit('grid-type-change', value)
}

const handleGridColorChange = (value: string) => {
  emit('grid-color-change', value)
}

const handleReferenceStandardsChange = (value: boolean) => {
  emit('reference-standards-change', value)
}

const handleElementsStandardChange = (value: boolean) => {
  emit('elements-standard-change', value)
}

const handleGuidelineStandardChange = (value: boolean) => {
  emit('guideline-standard-change', value)
}

const handleToggleSelectionGroupsCollapse = () => {
  emit('toggle-selection-groups-collapse')
}

const handleSelectGroupOnly = (groupId: string) => {
  emit('select-group-only', groupId)
}

const handleSelectionGroupContextMenu = (event: MouseEvent, groupId: string) => {
  emit('selection-group-context-menu', event, groupId)
}

const handleEditGroup = (groupId: string) => {
  emit('edit-group', groupId)
}

const handleCreateSelectionGroup = () => {
  emit('create-selection-group')
}

const handleBackToGroupsList = () => {
  emit('back-to-groups-list')
}

const handleUpdateSelectionGroup = () => {
  emit('update-selection-group')
}

const handleDeleteSelectionGroup = () => {
  emit('delete-selection-group')
}

const handleApplyChanges = (data: any) => {
  emit('apply-changes', data)
}

const handleParameterChange = (data: any) => {
  emit('parameter-change', data)
}

const handlePinValueChange = (data: any) => {
  emit('pin-value-change', data)
}

const handlePropertyChange = (data: any) => {
  emit('property-change', data)
}

const handleNodePositionChange = (x?: number, y?: number) => {
  emit('node-position-change', x, y)
}

const handleNodeSizeChange = (width?: number, height?: number) => {
  emit('node-size-change', width, height)
}

const handleResetNodeSize = () => {
  emit('reset-node-size')
}

const handleBringToFront = () => {
  emit('bring-to-front')
}

const handleSendToBack = () => {
  emit('send-to-back')
}

const handleRotateNode = (node: Node, angle: number) => {
  emit('rotate-node', node, angle)
}

const handleNodeFillChange = (color: string) => {
  emit('node-fill-change', color)
}

const handleNodeStrokeChange = (color: string) => {
  emit('node-stroke-change', color)
}

const handleNodeStrokeWidthChange = (width: number) => {
  emit('node-stroke-width-change', width)
}

const handleNodeLabelColorChange = (color: string) => {
  emit('node-label-color-change', color)
}

const handleNodeFontSizeChange = (size: number) => {
  emit('node-font-size-change', size)
}

const handleNodeFontFamilyChange = (family: string) => {
  emit('node-font-family-change', family)
}

const handleEdgeSourcePortChange = (port: string) => {
  emit('edge-source-port-change', port)
}

const handleEdgeTargetPortChange = (port: string) => {
  emit('edge-target-port-change', port)
}

const handleEdgeRouterTypeChange = (type: string) => {
  emit('edge-router-type-change', type)
}

const handleEdgeConnectorTypeChange = (type: string) => {
  emit('edge-connector-type-change', type)
}

const handleEdgeStrokeColorChange = (color: string) => {
  emit('edge-stroke-color-change', color)
}

const handleEdgeStrokeWidthChange = (width: number) => {
  emit('edge-stroke-width-change', width)
}

const handleEdgeFillColorChange = (color: string) => {
  emit('edge-fill-color-change', color)
}

const handleEdgeTextColorChange = (color: string) => {
  emit('edge-text-color-change', color)
}

const handleEdgeFontFamilyChange = (family: string) => {
  emit('edge-font-family-change', family)
}

const handleEdgeFontSizeChange = (size: number) => {
  emit('edge-font-size-change', size)
}
</script>

<style lang="scss" scoped>
.context-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 300px;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-left: 1px solid #dfe3e8;
  transition: opacity 0.3s ease;

  &.collapsed {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  .antvX6Demo-container-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border-left: 1px solid #dfe3e8;
  }

  .properties-header {
    padding: 12px 16px 0;
    border-bottom: 1px solid #ebeef5;

    :deep(.el-tabs__header) {
      margin: 0;
    }

    :deep(.el-tabs__nav-wrap) {
      &::after {
        height: 1px;
      }
    }

    :deep(.el-tabs__item) {
      padding: 0 12px;
      font-size: 14px;
    }
  }

  .properties-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;

      &:hover {
        background: #a8a8a8;
      }
    }
  }

  .property-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    &.half-width {
      width: 48%;
      display: inline-flex;
      margin-right: 4%;

      &:nth-child(even) {
        margin-right: 0;
      }
    }

    &.full-width {
      width: 100%;
    }

    .property-label {
      flex: 0 0 80px;
      font-size: 14px;
      color: #606266;
      text-align: left;

      .required {
        color: #f56c6c;
        margin-left: 4px;
      }
    }

    .property-value {
      flex: 1;
      margin-left: 12px;

      :deep(.el-input),
      :deep(.el-select),
      :deep(.el-input-number) {
        width: 100%;
      }

      :deep(.el-color-picker) {
        .el-color-picker__trigger {
          width: 100%;
          height: 28px;
        }
      }
    }
  }

  .property-hint {
    margin-bottom: 16px;
    padding: 8px;
    background-color: #f0f9ff;
    border-radius: 4px;
    border-left: 3px solid #409eff;

    :deep(.el-text) {
      line-height: 1.4;
    }
  }

  .property-section {
    margin-bottom: 24px;

    .section-title {
      padding-bottom: 8px;
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: #909399;
    text-align: center;
  }

  .groups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebeef5;

    .groups-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }

    .groups-toggle,
    .groups-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  .groups-list {
    margin-bottom: 16px;

    .group-list-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      margin-bottom: 8px;
      cursor: pointer;
      background-color: #f8f9fa;
      border-radius: 4px;
      transition: background-color 0.2s;

      &:hover {
        background-color: #e9ecef;
      }

      &.active {
        background-color: #e7f3ff;
        border: 1px solid #409eff;
      }

      .group-color {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 50%;
        border: 1px solid #dcdfe6;
      }

      .group-name {
        flex: 1;
        font-size: 14px;
        color: #303133;
      }
    }
  }

  .group-actions {
    margin-top: 16px;

    .el-button {
      width: 100%;
    }
  }

  .no-config-debug,
  .no-config-message {
    padding: 16px;
    background-color: #fef0f0;
    border-radius: 4px;
    border-left: 3px solid #f56c6c;

    p {
      margin: 4px 0;
      font-size: 13px;
      color: #606266;
    }
  }

  .edge-parameters-panel {
    .parameter-header {
      margin-bottom: 16px;

      .parameter-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 4px;
      }

      .parameter-subtitle {
        font-size: 12px;
        color: #909399;
      }
    }

    .no-parameters-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 16px;
      text-align: center;

      .placeholder-icon {
        margin-bottom: 12px;
        font-size: 32px;
        color: #d3d4d6;
      }

      .placeholder-text {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #909399;
      }

      .placeholder-hint {
        font-size: 12px;
        line-height: 1.4;
        color: #c0c4cc;
      }
    }
  }
}
</style>
